<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>确认订单</title>
		<style type="text/css">
			@font-face {
				font-family: 'iconfont';
				src: url('../../static/css/font/iconfont.eot');
				src: url('../../static/css/font/iconfont.eot?#iefix') format('embedded-opentype'), url('../../static/css/font/iconfont.woff2') format('woff2'), url('../../static/css/font/iconfont.woff') format('woff'), url('../../static/css/font/iconfont.ttf') format('truetype'), url('../../static/css/font/iconfont.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		</style>
		<link rel="stylesheet" href="../../static/css/Payment-page.css" />
		<script type="text/javascript" src="../../static/js/jquery-3.1.0.js"></script>
		<script type="text/javascript" src="../../static/js/Payment-page.js"></script>
	</head>

	<body>
		<div>
			<!--顶部-->
			<div class="layout-header clearfix layout-header-order login" id="layoutHeader">
				<div class="mzcontainer">
					<!--魅族商标-->
					<div class="layout-header-logo">
						<a class="layout-header-logo-link" target="_blank">
							<img src="../../static/img/1.png" style="max-width:125px;margin-top:28px;margin-left: 20px;" />
						</a>
					</div>
					<ul class="layout-header-bread">
						<li class="layout-header-bread-block ">
							购物车
						</li>
						<li class="layout-header-bread-block active">
							确认订单
						</li>
						<li class="layout-header-bread-block ">
							在线支付
						</li>
						<li class="layout-header-bread-block ">
							完成
						</li>
					</ul>
					<ul class="layout-header-right">
						<li class="layout-header-right-item">
							<a class="layout-header-right-link" target="_blank">
								我的订单
							</a>
						</li>
						<li class="layout-header-right-item signout">
							<a class="layout-header-right-link">
								登录
							</a>
						</li>
						<li class="layout-header-right-item signout">
							<a class="layout-header-right-link" target="_blank">
								注册
							</a>
						</li>
						<li class="layout-member signin">
							<a class="layout-member-link" target="_blank">
								<span class="layout-member-username" id="topbarUser">我的小可爱不可爱了</span> 的商城
								<i class="layout-member-triangle"></i>
							</a>
							<ul class="layout-member-downmenu">
								<li class="layout-member-downmenu-item">
									<a class="layout-member-downmenu-link" target="_blank">
										地址管理
									</a>
								</li>
								<li class="layout-member-downmenu-item">
									<a class="layout-member-downmenu-link" target="_blank">
										我的收藏
									</a>
								</li>
								<li class="layout-member-downmenu-item" target="_blank">
									<a class="layout-member-downmenu-link" target="_blank">
										我的回购金
									</a>

								</li>
								<li class="layout-member-downmenu-item" target="_blank">
									<a class="layout-member-downmenu-link" target="_blank">
										问题反馈
									</a>
								</li>
								<li class="layout-member-downmenu-item" target="_blank">
									<a class="layout-member-downmenu-link" target="_blank">
										退出
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!--中部样式-->
			<!--地址栏-->
			<div class="order">
				<div class="mzcontainer">
					<div class="order-address" id="addressModule">
						<div class="order-address-title">
							收货人信息
						</div>
						<ul class="order-address-list clearfix" id="addressList" style="height: 174px;">
							<!--修改后地址-->
							<li class="order-address-checkbox" data-mdesc="收货人信息" id="check-box">
								<div class="order-address-checkbox-top">
									<div class="order-address-checkbox-name" title="郭晓梅">郭晓梅</div>
									<div class="order-address-checkbox-phone">13017122658</div>
								</div>
								<div class="order-address-checkbox-content">海南省海口市龙华区龙桥镇海南医学院对面</div>
								<div class="order-address-checkbox-checked" style="display: none;">
									<div class="order-address-checkbox-tick"></div>
									<div class="order-address-checkbox-ctrl" id="remove-check">
										<div class="order-address-checkbox-delete">删除</div>
										<div class="order-address-checkbox-edit">修改</div>
									</div>
								</div>
							</li>
							<!--默认地址-->
							<li class="order-address-checkbox checked" data-mdesc="收货人信息" id="add-check">
								<div class="order-address-checkbox-top">
									<div class="order-address-checkbox-name" title="果小美">果小美</div>
									<div class="order-address-checkbox-phone">13017122658</div>
								</div>
								<div class="order-address-checkbox-content">
									海南省琼海市琼海市长坡镇长坡镇长文街道
								</div>
								<div class="order-address-checkbox-checked">
									<div class="order-address-checkbox-tick"></div>
									<div class="order-address-checkbox-ctrl" id="remove-choock">
										<div class="order-address-checkbox-delete">删除</div>
										<div class="order-address-checkbox-edit">修改</div>
									</div>
								</div>
							</li>
							<!--新增地址-->
							<li class="order-address-checkbox add" id="add-address">
								<div class="order-add-icon iconfont">&#xe604;</div>
								<div class="order-address-add-text">
									添加新地址
								</div>
							</li>
						</ul>
					</div>
					<div class="mzcontainer order-product">
						<div class="order-product-title">确认订单信息</div>
						<div class="order-product-list" id="orderProductList">
							<table class="order-product-table" cellspacing="0" cellpadding="0">
								<thead>
									<tr>
										<th class="order-product-table-name">
											<div class="order-product-supplier">
												供应商：
												<span class="order-product-supplier-name">魅族</span>
											</div>
										</th>
										<th class="order-product-table-price">单价</th>
										<th class="order-product-table-num">数量</th>
										<th class="order-product-table-total">小计</th>
										<th class="order-product-table-express table-express-header">配送方式</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="order-product-table-name">
											<a target="_blank" class="order-product-link" data-mdesc="确认订单信息">
												<img src="../../static/img/cg.png" style="vertical-align: middle;" />
											</a>
											<div class="order-product-name">
												<a target="_blank" class="order-product-link">
													<p class="order-product-name-item item-name">魅族 16s</p>
													<p class="order-product-name-item cspu-desc">全网通公开版 碳纤黑 6+128GB</p>
												</a>
											</div>
										</td>
										<td class="order-product-table-price">
											<p>
												<span class="order-product-price">2699.00</span>
											</p>
										</td>
										<td class="order-product-table-num">
											1
										</td>
										<td class="order-product-table-total">
											<p class="order-product-price red">
												2699.00
											</p>
										</td>
										<td class="order-product-table-express" rowspan="999">
											<p>
												快递配送：运费
												<span class="order-product-price red express-fee has-express-fee">
											0.00
										</span>
											</p>
											<div class="order-product-arrival"></div>
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr class="order-product-footer">
										<td class="order-product-info" colspan="3">
											<div class="order-product-invoice clearfix">
												<div class="order-product-invoice-type">
													发票类型：电子发票
													<div class="order-product-invoice-icon"></div>
												</div>
												<span class="order-product-invoice-edit">
											修改
										</span>
												<div class="order-product-invoice-info">
													<p>
														发票抬头：
														<span class="order-product-invoice-title">
													默认为收货人姓名
												</span>
													</p>
												</div>
											</div>
										</td>
										<td class="order-product-total" colspan="2">
											合计：
											<span class="order-product-price red total-has-express-fee">
										2699.00
									</span>
										</td>
									</tr>
									<tr class="order-product-remark">
										<td colspan="5">
											<span class="order-product-remark-title">备注：</span>
											<textarea class="order-product-remark-input" maxlength="45"></textarea>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!--确认支付-->
			<div class="order-total clearfix" id="orderTotal">
				<div class="order-total-content">
					<div class="order-total-row">

						总金额：
						<div class="order-total-price" id="totalOrderPrice">
							2699.00
						</div>
					</div>
					<div class="order-total-row">

						运费
						<div class="order-total-price" id="totalExpressPrice">
							0.00
						</div>
					</div>
					<div class="order-total-line"></div>
					<div class="order-total-row">

						应付：
						<div class="order-total-price total" id="totalPayPrice">
							2699.00
						</div>
					</div>
					<div class="order-total-row order-total-valid-row clearfix">
						<div class="order-total-valid" id="validCode"></div>
						<div class="mz-btn success" id="submitForm" data-mdesc="下单并支付" data-mtype="store_se_pay">
							下单并支付
						</div>
					</div>
					<!--<div class="order-total-row order-total-row-tips" id="totalTips"></div>-->
				</div>
			</div>
			<!--底部 -->
			<div class="meizu-footer">
				<div class="meizu-footer-link">
					<!--底部服务项目-->
					<div class="meizu-row">
						<ul class="meizu-footer-service">
							<li>
								<a>
									<img src="../../static/img/meizu49.png" />
									<span>满80免运费</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu50.png" />
									<span>100+ 城市次日送达</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu51.png" />
									<span>7天无理由退货</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu52.png" />
									<span>15天换货保障</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu53.png" />
									<span>1年免费保修</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu54.png" />
									<span>上门快修</span>
								</a>
							</li>
						</ul>
						<div class="onlive-server">
							<span>周一至周日 7:30-24:00</span>
							<p class="tel">400-788-3333</p>
							<a class="onlive-btn">在线客服</a>
						</div>
					</div>
					<!--服务项目划线-->
					<hr class="foot-hr" />
					<!--底部了解详情-->
					<div class="meizu-footer-co">
						<div class="meizu-row-row">
							<div class="meizu-footer-info">
								<div class="meizu-footer-info-left">
									<ul class="clearfix">
										<li>
											<a><span>了解魅族</span></a>
										</li>
										<li>
											<a><span>加入我们</span></a>
										</li>
										<li>
											<a><span>联系我们</span></a>
										</li>
										<li>
											<a><span>Flyme</span></a>
										</li>
										<li>
											<a><span>魅族社区</span></a>
										</li>
										<li>
											<a><span>天猫旗舰店</span></a>
										</li>
										<li>
											<a><span>问题反馈</span></a>
										</li>
										<li>
											<a><span>线上销售授权名单公示</span></a>
										</li>
										<li>
											<a><span>出版物经营许可证证</span></a>
										</li>
										<li>
											<a><span>简体中文</span></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="meizu-footer-certificate">
						©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
						<a>粤ICP备13003602号</a>
						<a>合字B2-20170010</a>
						<a>营业执照</a>
						<a>法律声明</a>
						<span>粤公网安备 44049102496009号</span>
						<a></a>
						<a></a>
						<a></a>
					</div>
					<div class="ii-subscribe">
						<a><img src="../../static/img/meizu115.png" /></a>
						<span class="li-hr"></span>
						<a><img src="../../static/img/meizu116.png"></a>
						<span class="li-hr"></span>
						<a><img src="../../static/img/meizu117.png"></a>
					</div>
				</div>
			</div>
			<!--修改地址弹窗-->
			<div class="mz-mask" id="mz-edit">
				<div class="mz-dialog dialog address-adder" style="margin-left: -380px; margin-top: -182px;">
					<div class="mz-dialog-header">
						<div class="mz-dialog-title">修改地址</div>
						<div class="mz-dialog-close" id="address-close-1"></div>
					</div>

					<div class="mz-dialog-main">
						<div class="mz-dialog-warp">
							<div class="mz-dialog-content">
								<div class="address-adder-content">
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											收货人姓名
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp" data-tips="请输入收件人姓名！">
											<input type="text" class="mz-input address-adder-name" placeholder="姓名长度不超过15个文字" maxlength="15" />
										</div>
										<div class="address-adder-title">
											收货人手机号
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp">
											<input type="text" class="mz-input address-adder-phone" placeholder="请输入11位手机号" maxlength="11" />
										</div>
									</div>
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											收货人地址
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp address-adder-select mz-address">
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="省份/直辖市" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="城市" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="区/县" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="乡镇/街道" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-address-other mz-input-warp" style="display: none;">
												<input type="text" class="mz-input mz-address-input" placeholder="请输入其他街道名称" maxlength="10" />
											</div>
										</div>

									</div>
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											详细地址
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp">
											<input type="text" class="mz-input address-adder-detail" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" minlength="4" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mz-dialog-bottom">
						<div class="mz-btn success" id="success-1">确认</div>
						<div class="mz-btn cancel" id="cancel-1">取消</div>
					</div>
				</div>
			</div>

			<!--修改地址-->
			<div class="mz-mask" id="mz-add">
				<div class="mz-dialog dialog address-adder" style="margin-left: -380px; margin-top: -182px;">
					<div class="mz-dialog-header">
						<div class="mz-dialog-title">添加新地址</div>
						<div class="mz-dialog-close" id="address-close-2"></div>
					</div>

					<div class="mz-dialog-main">
						<div class="mz-dialog-warp">
							<div class="mz-dialog-content">
								<div class="address-adder-content">
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											收货人姓名
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp" data-tips="请输入收件人姓名！">
											<input type="text" class="mz-input address-adder-name" placeholder="姓名长度不超过15个文字" maxlength="15" />
										</div>
										<div class="address-adder-title">
											收货人手机号
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp">
											<input type="text" class="mz-input address-adder-phone" placeholder="请输入11位手机号" maxlength="11" />
										</div>
									</div>
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											收货人地址
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp address-adder-select mz-address">
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="省份/直辖市" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="城市" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="区/县" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-selectmenu">
												<input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="乡镇/街道" />
												<input type="hidden" tabindex="-1" />
											</div>
											<div class="mz-address-other mz-input-warp" style="display: none;">
												<input type="text" class="mz-input mz-address-input" placeholder="请输入其他街道名称" maxlength="10" />
											</div>
										</div>

									</div>
									<div class="address-adder-row clearfix">
										<div class="address-adder-title">
											详细地址
											<span class="address-adder-must">*</span>
										</div>
										<div class="mz-input-warp">
											<input type="text" class="mz-input address-adder-detail" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" minlength="4" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mz-dialog-bottom">
						<div class="mz-btn success" id="success-2">确认</div>
						<div class="mz-btn cancel" id="cancel-2">取消</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>